<!--缓考审批-->
<template>
  <div class="assessment-container" style="width:100%">
    <div class="search-container" style="margin:0;padding:0">
      <div class="search-container-item">
        <span>学期
          <span style="color:red" v-if="roleId == '1476444221949898754'">*</span>
        </span>
        <el-select
          v-model="termid"
          style="width: 120px"
          size="mini"
          clearable
          placeholder="请选择"
        >
        <!-- @clear="scorequery" -->
          <el-option
            v-for="(item,index) in xqList"
            :key="index"
            :label="item.xqmc"
            :value="item.xqmc"
          >
          </el-option>
        </el-select>
      </div>
      <div class="search-container-item" v-if="roleId != '1476444221949898754'">
        <span>级次</span>
        <el-select
          v-model="grade"
          style="width: 120px"
          size="mini"
          placeholder="请选择"
          clearable
        >
          <el-option
            v-for="(item,index) in njList"
            :key="index"
            :label="item.xqszxn"
            :value="item.xqszxn"
          >
          </el-option>
        </el-select>
      </div>
      <div class="search-container-item" v-if="roleId === '1490859421955674114' || roleId === '1490880728751644674' || roleId === '1490880584475975682'  || roleId === '1490859077385211906'">
        <span>队别</span>
        <el-select
          v-model="dd"
          style="width: 150px"
          size="mini"
          placeholder="请选择"
          clearable
        >
          <el-option
            v-for="item in ddList"
            :key="item.id"
            :label="item.deptName"
            :value="item.deptName"
          >
          </el-option>
        </el-select>
      </div>
      <div class="search-container-item" v-if="roleId != '1476444221949898754'">
        <span>专业</span>
        <el-select
          v-model="specialty"
          style="width: 120px"
          size="mini"
          placeholder="请选择"
          clearable
        >
          <el-option
            v-for="(item,index) in specialtyList"
            :key="index"
            :label="item.name"
            :value="item.name"
          >
          </el-option>
        </el-select>
      </div>
      <div class="search-container-item" v-if="roleId != '1476444221949898754'">
        <span>姓名</span>
        <el-input
          style="width: 120px"
          size="mini"
          placeholder="请输入姓名"
          v-model="stuName"
          clearable
        ></el-input>
      </div>
      <div class="search-container-item" v-if="roleId != '1476444221949898754'">
        <span>状态</span>
        <el-select
          v-model="status"
          style="width: 120px"
          size="mini"
          placeholder="请选择"
          clearable
        >
          <el-option
            v-for="(item,index) in stateList"
            :key="index"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <!-- <el-button type="primary" icon="el-icon-search" @click="getSelectCondition" size="mini">查 询</el-button> -->
      <div class="search-button" style="margin: 2px 0 0;">
        <img src="../../../assets/assessment/icon-search.png" alt=""/>
        <span @click="getSelectCondition">查询</span>
      </div>
      <div class="add-button" @click="toChangeRecord()" style="width: 160px;margin: 2px 30px 0" v-if="roleId === '1476444221949898754'">
        <!-- <img src="../../../assets/assessment/huankao.png" alt=""/>-->
        <span>增加缓考申请</span>
      </div>
    </div>
    <div class="table-container" style="width:100%;margin-top:15px" v-if="roleId == '1490859421955674114'">
      <div class="table-header" style="display: -webkit-box;">
        <div class="item cz" style="width:138px">
          <div style="margin-bottom: 5px">状态/操作</div>
        </div>
        <div class="item x" style="width:138px">姓名</div>
        <div class="item kcbh" style="width:138px">级次</div>
        <div class="item pycc" style="width:138px">队别</div>
        <div class="item xxlx" style="width:138px">专业</div>
        <div class="item skjy" style="width:138px">缓考原因</div>
        <div class="item nj" style="width:145px">日期</div>
        <div class="item jxb" style="width:138px">节次</div>
        <div class="item zybc" style="width:138px">课程名称</div>
        <div class="item jxbrs" style="width:138px">课程编号</div>
        <div class="item xb" style="width:138px">系</div>
        <div class="item zrs" style="width:138px">教研室</div>
      </div>
      <div class="table-body" v-for="(item, index) in tableData" :key="index" style="display: -webkit-box;">
        <div class="item cz" style="width:138px">
          <!-- 审批中 -->
          <div v-if="item.status == '0'" class="cz-sp">
            <span>审批中</span>
          </div>
          <div v-if="item.status == '1'" class="cz-sp">
            <span>已审批</span>
          </div>
          <div v-if="item.status == '-1'" class="cz-sp">
            <span>待审批</span>
          </div>
          <div class="cz-edit" v-if="item.status != '-1'" @click="update('查看',item.id)">
            <img
              src="../../../assets/assessment/icon-plan-record-detail.png"
              alt=""
            />
            <span>查看</span>
          </div>
          <!-- 待提交 -->
          <div v-if="item.status == '-1'" style="color:#51aef6;font-weight:600">
            <span>待提交</span>
          </div>
          <div
            v-if="item.status == '-1'"
            class="cz-save"
            style="margin-left:0px" @click="update('提交',item.id)"
          >
            <img src="../../../assets/assessment/icon-finish.png" alt=""/>
            <span style="color: #51AEF6;">提 交</span>
          </div>
          <div v-if="roleId != '1490880584475975682'">
            <div v-if="item.status == '-1'" class="cz-edit">
              <img
                src="../../../assets/assessment/icon-plan-record-detail.png"
                alt=""
              />
              <span @click="update('修改',item.id)">修 改</span>
            </div>
          </div>
          <div v-if="roleId != '1476444221949898754'">
            <div v-if="item.status == '-1'" class="cz-close" @click="update('打回',item.id,index)">
              <img src="../../../assets/assessment/icon-close.png" alt=""/>
              <span>打 回</span>
            </div>
          </div>
        </div>
        <div class="item x" style="width:138px">
          <div class="x-title">{{ item.name }}</div>
        </div>
        <div class="item right-content">
          <div class="right-content-info">
            <div class="item kcbh" style="width:138px">
              <div class="x-title">{{ item.level }}</div>
            </div>
            <div class="item pycc" style="width:138px">
              <div class="x-title">{{ item.team }}</div>
            </div>
            <div class="item xxlx" style="width:138px">
              <div class="x-title">{{ item.major }}</div>
            </div>
            <div class="item skjy"  style="width:138px">{{ item.hkdetails }}</div>
            <div class="item nj"  style="width:145px">
              <div class="item fza" v-for="(fz,index ) in item.kcdateList" :key="index">{{ fz }}</div>

            </div>
            <div class="item jxb"  style="width:138px">
              <div class="item fza" v-for="(fz,index ) in item.sectionList" :key="index">{{ fz }}</div>
            </div>
            <div class="item zybc" style="width:138px">
              <div class="item fza" v-for="(fz,index ) in item.coursenameList" :key="index">{{ fz }}</div>
            </div>
            <div class="item jxbrs" style="width:138px">
              <div class="item fza" v-for="(fz,index ) in item.coursenoList" :key="index">{{ fz }}</div>
            </div>
            <div class="item xb" style="width:138px">
              <div class="item fza" v-for="(fz,index ) in item.xbList" :key="index">{{ fz }}</div>
            </div>
            <div class="item zrs" style="width:138px">
              <div class="item fza" v-for="(fz,index ) in item.classroomList" :key="index">{{ fz }}</div>
            </div>
          </div>
          <div class="spjd" style="width: 90%;">
            <div class="spjd-title">审批进度：</div>
            <div class="time-line-horizon">
              <div class="time-line-block" v-for="(block, index1) in item.shspeeds" :key="index1">
                <div class="person-name">{{ block.checkuser }}</div>
                <div class="line-content">
                  <img src="../../../assets/assessment/icon-finish.png" alt="已审批" v-if="+block.chstatus === 1"/>
                  <img src="../../../assets/assessment/icon-dai.png" alt="待审批" v-if="+block.chstatus === 0"/>
                  <img src="../../../assets/assessment/icon-close.png" alt="未审批" v-if="+block.chstatus === -1"/>
                  <div class="date-time">
                    <span class="date">{{ block.checktime }}</span>
                    <span class="time">{{ block.chenckdate }}</span>
                  </div>
                </div>
                <div class="operate" v-if="index1 < item.shspeeds.length-1">
                  <div class="ly-block" @click="buttonClick('留言',block)">
                    <img src="../../../assets/assessment/icon-ly.png" alt=""/>
                    <div class="ly">留言</div>
                  </div>
                </div>
                <div class="operate" v-show="block.checkremark" v-if="index1!==0">
                  <div class="bubble-block" style="width: 100%">
                    <span @click="buttonClick('查看',block)" style=" white-space:nowrap;overflow:hidden;text-overflow:ellipsis;  display: block">{{ block.checkremark }}</span>
                    <div class="operate-button">
                      <div
                        class="button-ck"
                        @click="buttonClick('查看',block)"
                        v-show="block.checkremark" v-if="index1!==0"
                      >
                        查看
                      </div>
                      <div
                        class="button-bj"
                        @click="buttonClick('编辑',block)"
                        v-show="block.checkremark" v-if="index1!==0"
                      >
                        编辑
                      </div>
                      <div
                        @click="buttonClick('删除',block)"
                        class="button-sc"
                        v-show="block.checkremark" v-if="index1!==0"
                      >
                        删除
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="table-container" style="width:100%;margin-top:15px" v-if="roleId != '1490859421955674114'">
      <div class="table-header" style="display: -webkit-box;">
        <div class="item cz" style="width:156px">
          <div style="margin-bottom: 5px">状态/操作</div>
        </div>
        <div class="item x" style="width:147px">姓名</div>
        <div class="item kcbh" style="width:156px">级次</div>
        <div class="item pycc" style="width:156px">队别</div>
        <div class="item xxlx" style="width:156px">专业</div>
        <div class="item skjy" style="width:156px">缓考原因</div>
        <div class="item nj" style="width:156px">日期</div>
        <div class="item jxb" style="width:156px">节次</div>
        <div class="item zybc" style="width:156px">课程名称</div>
        <div class="item jxbrs" style="width:156px">课程编号</div>
        <div class="item xb" style="width:156px">系</div>
        <div class="item zrs" style="width:156px">教研室</div>
      </div>
      <div class="table-body" v-for="(item, index) in tableData" :key="index" style="display: -webkit-box;">
        <div class="item cz" style="width:156px">
          <!-- 审批中 -->
          <div v-if="item.status == '0'" class="cz-sp">
            <span>审批中</span>
          </div>
          <div v-if="item.status == '1'" class="cz-sp">
            <span>已审批</span>
          </div>
          <div v-if="item.status == '-1'" class="cz-sp">
            <span>待审批</span>
          </div>
            <div class="cz-edit" v-if="item.shspeeds[roleIndex].chstatus != '0'" @click="update('查看',item.id)">
              <img
                src="../../../assets/assessment/icon-plan-record-detail.png"
                alt=""
              />
              <span>查看</span>
            </div>
            <!-- 待提交 -->
            <!-- <div v-if="item.shspeeds[roleIndex].chstatus  == '0'" style="color:#51aef6;font-weight:600">
              <span>待提交</span>
            </div> -->
            <div
              v-if="item.shspeeds[roleIndex].chstatus == '0'"
              class="cz-save"
              style="margin-left:0px" @click="update('提交',item.id)"
            >
              <img src="../../../assets/assessment/icon-finish.png" alt=""/>
              <span style="color: #51AEF6;">提 交</span>
            </div>
            <div v-if="item.shspeeds[roleIndex].chstatus == '0'" class="cz-edit">
              <img
                src="../../../assets/assessment/icon-plan-record-detail.png"
                alt=""
              />
              <span @click="update('修改',item.id)">修 改</span>
            </div>
            <div v-if="roleId != '1476444221949898754'">
              <div v-if="item.shspeeds[roleIndex].chstatus == '0'" class="cz-close" @click="update('打回',item.id,index)">
                <img src="../../../assets/assessment/icon-close.png" alt=""/>
                <span>打 回</span>
              </div>
            </div>
        </div>
        <div class="item x" style="width:147px">
          <div class="x-title">{{ item.name }}</div>
        </div>
        <div class="item right-content">
          <div class="right-content-info">
            <div class="item kcbh" style="width:156px">
              <div class="x-title">{{ item.level }}</div>
            </div>
            <div class="item pycc" style="width:156px">
              <div class="x-title">{{ item.team }}</div>
            </div>
            <div class="item xxlx" style="width:156px">
              <div class="x-title">{{ item.major }}</div>
            </div>
            <div class="item skjy" style="width:156px">{{ item.hkdetails }}</div>
            <div class="item nj" style="width:156px">
              <div class="item fza" v-for="(fz,index ) in item.kcdateList" :key="index">{{ fz }}</div>
            </div>
            <div class="item jxb" style="width:156px">
              <div class="item fza" v-for="(fz,index ) in item.sectionList" :key="index">{{ fz }}</div>
            </div>
            <div class="item zybc" style="width:156px">
              <div class="item fza" v-for="(fz,index ) in item.coursenameList" :key="index">{{ fz }}</div>
            </div>
            <div class="item jxbrs" style="width:156px">
              <div class="item fza" v-for="(fz,index ) in item.coursenoList" :key="index">{{ fz }}</div>
            </div>
            <div class="item xb" style="width:156px">
              <div class="item fza" v-for="(fz,index ) in item.xbList" :key="index">{{ fz }}</div>
            </div>
            <div class="item zrs" style="width:156px">
              <div class="item fza" v-for="(fz,index ) in item.classroomList" :key="index">{{ fz }}</div>
            </div>
          </div>
          <div class="spjd">
            <div class="spjd-title">审批进度：</div>
            <div class="time-line-horizon">
              <div class="time-line-block" v-for="(block, index1) in item.shspeeds" :key="index1">
                <div class="person-name">{{ block.checkuser }}</div>
                <div class="line-content">
                  <img src="../../../assets/assessment/icon-finish.png" alt="已审批" v-if="+block.chstatus === 1"/>
                  <img src="../../../assets/assessment/icon-dai.png" alt="待审批" v-if="+block.chstatus === 0"/>
                  <img src="../../../assets/assessment/icon-close.png" alt="未审批" v-if="+block.chstatus === -1"/>
                  <div class="date-time">
                    <span class="date">{{ block.checktime }}</span>
                    <span class="time">{{ block.chenckdate }}</span>
                  </div>
                </div>
                <div class="operate" v-if="index1 < item.shspeeds.length-1">
                  <div class="ly-block" @click="buttonClick('留言',block)">
                    <img src="../../../assets/assessment/icon-ly.png" alt=""/>
                    <div class="ly">留言</div>
                  </div>
                </div>
                <div class="operate" v-show="block.checkremark" v-if="index1!==0">
                  <div class="bubble-block" style="width: 100%">
                    <span @click="buttonClick('查看',block)" style=" white-space:nowrap;overflow:hidden;text-overflow:ellipsis;  display: block">{{ block.checkremark }}</span>
                    <div class="operate-button">
                      <div
                        class="button-ck"
                        @click="buttonClick('查看',block)"
                        v-show="block.checkremark" v-if="index1!==0"
                      >
                        查看
                      </div>
                      <div
                        class="button-bj"
                        @click="buttonClick('编辑',block)"
                        v-show="block.checkremark" v-if="index1!==0"
                      >
                        编辑
                      </div>
                      <div
                        @click="buttonClick('删除',block)"
                        class="button-sc"
                        v-show="block.checkremark" v-if="index1!==0"
                      >
                        删除
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-pagination
      style="width:auto;margin-top: 15px;float:right;margin-bottom:50px;padding:0"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="cuurrentPage"
      :page-sizes="[5, 10, 20, 30,50,100,200]"
      :page-size="size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    <el-dialog
      title="添加留言"
      :visible.sync="showAddMessageDialog"
      width="983px"
    >
      <div class="message-container">
        <div>添加留言：</div>
        <div>
          <el-input
            v-model="message.text"
            type="textarea"
            :rows="8"
            style="width: 550px"
          ></el-input>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <button class="green" @click="addText">确 定</button>
      </span>
    </el-dialog>
    <el-dialog
      title="编辑留言"
      :visible.sync="showbjMessageDialog"
      width="983px"
    >
      <div class="message-container">
        <div>编辑留言：</div>
        <div>
          <el-input
            v-model="message.checkremark"
            type="textarea"
            :rows="8"
            style="width: 550px"
          ></el-input>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <button class="green" @click="textSelect">确 定</button>
      </span>
    </el-dialog>
    <el-dialog
      title="查看留言"
      :visible.sync="showckMessageDialog"
      width="983px"
    >
      <div class="message-container">
        <div>查看留言：</div>
        <div>
          <!--                        v-model="block.bjmeaasgeText"-->
          <el-input
            v-model="message.checkremark"
            type="textarea"
            :rows="8"
            style="width: 550px"
            disabled="false"
          ></el-input>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <button class="green" @click="showckMessageDialog = false">确 定</button>
      </span>
    </el-dialog>
    <el-dialog
      title="打回选择"
      :visible.sync="showExportReportDialog"
      width="983px"
      class="manual-entry-container"
      @close="closeDia"
    >
      <div class="message-container">
          <div>打回级别：</div>
          <div>
            <el-select
            v-model="reportTypep"
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="(item,index) in reportTypepss"
              :key="index"
              :label="item.value"
              :value="item.label"
            >
            </el-option>
          </el-select>
          </div>
      </div>
      <div class="message-container" style="margin-top:30px">
        <div>打回原因：</div>
        <div>
          <el-input
            v-model="rejectLeaving"
            type="textarea"
            :rows="8"
            style="width: 550px"
            placeholder="请输入打回原因"
          ></el-input>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <button class="green" @click="sureClick">确 定</button>
      </span>
    </el-dialog>  
    <div class="export-button" style="width: 130px;
      background: #fff6ef;
      border: 1px solid #f3b815;
      height: 28px;
      line-height: 28px;
      border-radius: 6px;
      cursor: pointer;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;margin-top:15px">
      <img src="../../../assets/assessment/icon-export.png" style="width: 16px; height: 16px; margin-right: 5px;" alt=""/>
      <download-excel
        class="export-btn"
        :data="exportData"
        :fields="jsonFields"
        type="xls"
        name="缓考审批.xls"
        style="color: #f3b815;cursor: pointer"
      >
        &ensp;导出Excel
      </download-excel>
    </div>
  </div>
</template>

<script>
import SelectItem from "../../../components/SelectItem.vue";
import InputItem from "../../../components/InputItem.vue";
import ButtonItem from "../../../components/ButtonItem.vue";
import { reqGetXqList,reqCheckYearList,reqXydList } from "@/api/admin1/check";
import { szzszy } from "@/api/professional/details";
import {addMessage,reject, studentSelectCondition, updateStatus, updateMessage,getSelectCondition,capSelectCondition} from "@/api/examination/approvalDelayedExam";
import { querydd } from "@/api/course/courses";
import { getStore } from '@/util/store.js'
import { selectCondition } from '../../../api/courseExame/courseExa';

export default {
  components: {
    SelectItem,
    InputItem,
    ButtonItem,
  },
  data() {
    return {
      jsonFields: {
        姓名: "name",
        级次: "level",
        队别: "team",
        专业: "major",
        缓考原因: "hkdetails",
        日期: "kcdate",
        节次: "section",
        课程名称: "coursename",
        课程编号: "courseno",
        系: "xb",
        教研室: "classroom"
      },
      reportTypep: "",
      reportTypepss: [],
      rejectLeaving: '',
      current:1,
      size:10,
      roleIndex:'',
      message: {
        text: ''
      },
      termid: "",
      xqList: [],
      unit: "",
      unitList: [],
      grade: "",
      njList: [],
      dd:"",
      ddList:[],
      stuName: "",
      specialty: "",
      specialtyList: [],
      status: "",
      stateList: [
        // {
        //   value: "待提交",
        //   label: "待提交",
        // },
        {
          value: "-1",
          label: "审批中",
        },
        {
          value: "1",
          label: "已审批",
        },
        {
          value: "0",
          label: "待审批",
        },
      ],
      checkedStatus: false,
      tableData: [],
      searchNameList: [],
      //添加留言
      showAddMessageDialog: false,
      //编辑留言
      showbjMessageDialog: false,
      //查看留言
      showckMessageDialog: false,
      //打回
      showExportReportDialog: false,
      meaasgeText: "",
      courseYpr: "",
      course: "",
      roleId: '',
      total:'',
      exportData:[],
      idType:''
    };
  },
  created() {
    const userInfo = getStore({
      name: "userInfo",
      debug: true,
    }) || {}
    this.roleId = userInfo.content.role_id;
  },
  mounted() {
    this.termAll();
    this.gradeAll();
    this.getlist();
    this.ddAll();
    this.getSelectCondition();
  },
  methods: {
    closeDia(){
      this.reportTypep = '';
      this.rejectLeaving = '';
    },
    sureClick() {
      let obj = {};
      obj.id = this.idType;
      if (this.reportTypep || this.reportTypep === 0) {
        obj.reject = this.reportTypep
      } else {
        this.$message.error('没有选择打回人');
        return
      }
      if (this.rejectLeaving) {
        obj.leaving = this.rejectLeaving
      } else {
        this.$message.error('没有输入打回原因');
        return
      }
      this.showExportReportDialog = false;
      return new Promise(() => {
        //网上评教修改保存
        reject(obj).then(res => {
          if (res.data.code === 200) {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: "success",
            });
            this.getSelectCondition();
            this.closeDia()
          }
        })
      })

    },
    rejectUpdat(id, index) {
      let shspeeds = this.tableData[index].shspeeds;
      let arr = [];
      let obj;
      let sort = '';
      for (const shspeedsKey in shspeeds) {
        if(shspeeds[shspeedsKey].roleId == this.roleId){
          sort = shspeeds[shspeedsKey].sort;
          this.idType = shspeeds[shspeedsKey].id
        }
          console.log(sort)
          console.log(this.idType)
        if (+shspeeds[shspeedsKey].chstatus == 1) {
          console.log(shspeeds[shspeedsKey])
          // console.log(shspeeds[shspeedsKey])
          let checkuser = shspeeds[shspeedsKey].checkuser.split(':')[0];
          console.log(checkuser)
          obj = {
            label: shspeeds[shspeedsKey].sort,
            value: checkuser,
            id: shspeeds[shspeedsKey].did
          }
          arr.push(obj)
        }
        this.reportTypepss = arr
      }
      this.reportTypepss = this.reportTypepss.filter((k)=>{
        return k.label < sort
      })
      console.log(this.reportTypepss)
    },
    handleCurrentChange(val) {
      this.current = val;
      this.getSelectCondition();
    },
    handleSizeChange(val) {
      this.size = val;
      this.getSelectCondition();
    },
    // 获取学期
    async termAll() {
      const result = await reqGetXqList();
      if (result.data.code == 200) {
        this.xqList = result.data.data;
      }
    },
    // 获取队别下拉框
    async ddAll(){
      const result = await reqXydList();
      result.data.code == 200 ? this.ddList = result.data.data : [];
    },
    //获取年级
    gradeAll(){
      let that = this;
      reqCheckYearList().then(res => {
        if(res.data.code == 200 && res.data.data){
          that.njList = res.data.data;
          // that.grade = res.data.data[0].xqszxn;
        }
      });
    },
    //获取专业班次
    getlist() {
      return new Promise(() => {
        szzszy().then((res) => {
          this.specialtyList = res.data.data;  
        });
      });
    },
    toChangeRecord(){
      if(this.termid == ''){
        this.$message({
          showClose: true,
          message: "请先选择学期！",
          type: "error",
        });
        return
      }
      let pathname = '/' + window.location.pathname.split('/')[1]
      this.$router.push({
        path:pathname+'/approvalDelayedExam/addPlan',
        query:{
          term:this.termid
        }
      })
    },
    checkAll() {
      this.tableData = this.tableData.map((item) => {
        return {...item, checked: this.checkedStatus};
      });
    },
    itemChange() {
      this.checkedStatus = this.tableData.every((item) => item.checked);
    },
    update(type, id,index) {
      let obj = {
        id: id
      }
      let pathname = '/' + window.location.pathname.split('/')[1]
      if (type === '提交') {
        obj.status = '0'
        this.updateStatus(obj)
      } else if (type === '打回') {
        // obj.status = '2';
        // this.updateStatus(obj);
        this.showExportReportDialog = true
        this.rejectUpdat(id, index)
      } else if (type === "修改") {
        this.$router.push({
          path: pathname+'/approvalDelayedExam/editPlan',
          query: {
            id: id,
            type:type
          }
        })
      } else if(type === "查看"){
        this.$router.push({
          path:  pathname+'/approvalDelayedExam/detailPlan',
          query: {
            id: id,
            type:type
          }
        })
      }
    },
    updateStatus(obj) {
      updateStatus(obj).then(res => {
        if (res.status == 200) {
          this.getSelectCondition()
        }
      })
    },
    buttonClick(type, black) {
      this.message = {}
      console.log(black, 'black')
      this.message = {
        id: black.id,
        checkremark: black.checkremark
      }
      if (type === '留言') {
        this.showAddMessageDialog = true
        console.log(this.message)
      } else if (type === '查看') {
        this.showckMessageDialog = true,
          console.log(this.message)
      } else if (type === '编辑') {
        this.showbjMessageDialog = true
        console.log(this.message)
      } else if (type === '删除') {
        this.$confirm('确认要删除吗？')
          .then(_ => {
            this.textDelete()
          })
      }
    },
    addText() {
      // this.showAddMessageDialog = false;
      // this.update(tid, tex);
      let obj = {
        id: this.message.id,
        leaving: this.message.text
      }
      addMessage(obj).then(res => {
        if (res.status == 200) {
          this.showAddMessageDialog = false;
          this.getSelectCondition()
          this.$message({
            showClose: true,
            message: '添加成功',
            type: 'success'
          });
        }
      })
    },
    textSelect() {
      let obj = {
        id: this.message.id,
        leaving: this.message.checkremark
      }
      updateMessage(obj).then(res => {

        if (res.status == 200) {
          this.showbjMessageDialog = false;
          this.getSelectCondition()
          this.$message({
            showClose: true,
            message: '编辑成功',
            type: 'success'
          });
        }
      })
    },

    textDelete() {
      let obj = {
        id: this.message.id,
        leaving: "",
      }
      updateMessage(obj).then(res => {
        if (res.status == 200) {
          this.$message({
            showClose: true,
            message: '删除成功',
            type: 'success'
          });
          this.getSelectCondition()
        }

      })

    },
    getSelectCondition() {
      let obj = {
        xueqi: this.termid,
        major: this.specialty,
        level: this.grade,
        name: this.stuName,
        status: this.status,
        team:this.dd,
      };
      var methodT = '';
      if(this.roleId == '1476444221949898754') {
        methodT = studentSelectCondition;
      } else if (this.roleId == '1490880728751644674'){
        methodT = capSelectCondition;
      } else {
        methodT = getSelectCondition;
      }
      methodT(this.current,this.size,obj).then(res=>{
        this.tableData = res.data.data.records;
        let data = res.data.data.records;
        this.total = res.data.data.total;
        if(res.data.data.records.length <= 0){
          this.$message({
            type:'info',
            message:'暂无数据！'
          })
          return
        }
        if(data.length > 0){
          for (let i = 0; i < this.tableData.length; i++) {
            this.tableData[i].kcdateList = [];
            this.tableData[i].sectionList = [];
            this.tableData[i].coursenameList = [];
            this.tableData[i].coursenoList = [];
            this.tableData[i].classroomList = [];
            this.tableData[i].xbList = [];
            for (let j = 0; j < this.tableData[i].courselists.length; j++) {
              this.tableData[i].courselists[j].name = this.tableData[i].name;
              this.tableData[i].courselists[j].level = this.tableData[i].level;
              this.tableData[i].courselists[j].team = this.tableData[i].team;
              this.tableData[i].courselists[j].major = this.tableData[i].major;
              this.tableData[i].courselists[j].hkdetails = this.tableData[i].hkdetails;
              this.tableData[i].kcdateList.push(data[i].courselists[j].kcdate.split('T')[0])
              this.tableData[i].sectionList.push(data[i].courselists[j].section)
              this.tableData[i].coursenameList.push(data[i].courselists[j].coursename)
              this.tableData[i].coursenoList.push(data[i].courselists[j].courseno)
              this.tableData[i].classroomList.push(data[i].courselists[j].classroom)
              this.tableData[i].xbList.push(data[i].courselists[j].xb)
            }
            this.exportData = this.exportData.concat(this.tableData[i].courselists);
            for (let x = 0; x < this.tableData[i].shspeeds.length; x++) {
              let shspeeds = this.tableData[i].shspeeds
              shspeeds[x] = {
                checktime: shspeeds[x].audittime.split('T')[0],
                chenckdate: shspeeds[x].audittime.split('T')[1],
                id: shspeeds[x].id,
                checkremark: shspeeds[x].leaving,
                checkuser: shspeeds[x].reviewer,
                chstatus: shspeeds[x].status,
                did:shspeeds[x].did,
                sort:shspeeds[x].sort,
                roleId:shspeeds[x].roleId
              }
              if(this.tableData[i].shspeeds[x].roleId == this.roleId){
                this.roleIndex = x;
              }
            }
          }
        }
      })
    }
  },
};
</script>
<style lang="less" scoped> 
.choose-ypr-container {
  width: 100%;
  margin: 0px auto;

  .choose-ypr-search-container {
    .el-input--prefix .el-input__inner {
      padding-left: 30px;
    }

    .el-input__inner {
      &::placeholder {
        color: #b8b8b8;
      }

      &::-webkit-input-placeholder {
        /* WebKit browsers 适配谷歌 */
        color: #b8b8b8;
      }

      &:-moz-placeholder {
        /* Mozilla Firefox 4 to 18 适配火狐 */
        color: #b8b8b8;
      }

      &::-moz-placeholder {
        /* Mozilla Firefox 19+ 适配火狐 */
        color: #b8b8b8;
      }

      &:-ms-input-placeholder {
        /* Internet Explorer 10+  适配ie*/
        color: #b8b8b8;
      }
    }

    display: flex;
    flex-direction: row;
    align-items: center;

    .title {
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      line-height: 20px;
      color: #004ca7;
      margin-right: 5px;
    }

    .search-button {
      width: 77px;
      height: 28px;
      line-height: 28px;
      background: #f1f8fe;
      border: 1px solid #51aef6;
      border-radius: 6px;
      cursor: pointer;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;

      > span {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #51aef6;
      }

      > img {
        width: 20px;
        height: 20px;
        margin-right: 4px;
      }
    }

    .button-list {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-left: 21px;

      .button-item {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        position: relative;
        width: 69px;
        height: 27px;
        line-height: 27px;
        border: 1px solid #004ca7;
        border-radius: 4px;
        margin-right: 10px;
        text-align: center;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #004ca7;

        .del-icon {
          position: absolute;
          right: 0px;
          top: 0px;
          width: 12px;
          height: 12px;
          padding: 2px;
        }
      }
    }
  }

  .choose-ypr-table-container {
    margin-top: 30px;

    .el-table td,
    .el-table th.is-leaf,
    .el-table--border,
    .el-table--group {
      border-color: #c7d7eb;
    }

    .el-table__header tr,
    .el-table__header th {
      padding: 0;
      height: 57px;
      background-color: #edf2f9;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      line-height: 20px;
      color: #004ca7;
    }

    .el-table__body tr,
    .el-table__body td {
      padding: 0;
      height: 51px;
    }

    .table-data {
      width: 100%;
      border: 0.8px solid #004ca7;
      border-radius: 9px;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #004ca7;
    }
  }
}

.assessment-container {
  .el-dialog__body {
    height: 251px;
  }

  .el-dialog__footer {
    padding: 10px 20px 45px;
  }

  .el-checkbox__inner:hover {
    border-color: #004ca7;
  }

  .el-checkbox__inner {
    border: 1px solid #004ca7;
    border-radius: 0;
    height: 18px;
    width: 18px;
  }

  .el-checkbox__inner::after {
    height: 10px;
    left: 6px;
  }

  .el-checkbox__input.is-checked .el-checkbox__inner,
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #004ca7;
    border-color: #004ca7;
  }

  .el-checkbox__input.is-checked + .el-checkbox__label {
    color: #004ca7;
  }

  .el-checkbox.is-bordered.is-checked {
    border-color: #004ca7;
  }

  .el-checkbox__input.is-focus .el-checkbox__inner {
    border-color: #004ca7;
  }
}
</style>
<style lang="less" scoped>
@import "../../../styles/delayedExam.less";

/deep/.table-container {
  .table-body {
    .item {
      &:last-child {
        border-right: none;
      }
    }
    .cz {
      width: 8.3%;
    }
  }
}
    
// .jxb {
//   width: 188px !important;
// }

// .jxbrs {
//   width: 158px !important;
// }

.cz-close > img {
  width: 16px;
  height: 16px;
  margin-right: 10px;
}

.cz-close {
  background: #ffefef;
  border: 1px solid #fa5339;
  color: #fa5339;
  box-sizing: border-box;
  width: 78px;
  height: 27px;
  line-height: 24px;
  border-radius: 4px;
  text-align: center;
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
}

.assessment-container
.table-container
.table-body
.right-content
.spjd
.time-line-horizon
.time-line-block {
  width: 297px !important;
}

.assessment-container
.table-container
.table-body
.right-content
.spjd
.time-line-horizon::before {
  width: 1195px !important;
}

.search-container {
  justify-content: flex-start !important;
}

/deep/ .szjky .el-dialog__body {
  height: 432px;
}

.choose-ypr-search-container {
  .el-input--prefix .el-input__inner {
    padding-left: 30px;
  }

  .el-input__inner {
    &::placeholder {
      color: #b8b8b8;
    }

    &::-webkit-input-placeholder {
      /* WebKit browsers 适配谷歌 */
      color: #e41111;
    }

    &:-moz-placeholder {
      /* Mozilla Firefox 4 to 18 适配火狐 */
      color: #b8b8b8;
    }

    &::-moz-placeholder {
      /* Mozilla Firefox 19+ 适配火狐 */
      color: #b8b8b8;
    }

    &:-ms-input-placeholder {
      /* Internet Explorer 10+  适配ie*/
      color: #b8b8b8;
    }
  }

  display: flex;
  flex-direction: row;
  align-items: center;

  .title {
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
    margin-right: 5px;
  }

  .search-button {
    width: 77px;
    height: 28px;
    line-height: 28px;
    background: #f1f8fe;
    border: 1px solid #51aef6;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    > span {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #51aef6;
    }

    > img {
      width: 20px;
      height: 20px;
      margin-right: 4px;
    }
  }

  .button-list {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-left: 21px;

    .button-item {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      position: relative;
      width: 69px;
      height: 27px;
      line-height: 27px;
      border: 1px solid #004ca7;
      border-radius: 4px;
      margin-right: 10px;
      text-align: center;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #004ca7;

      .del-icon {
        position: absolute;
        right: 0px;
        top: 0px;
        width: 12px;
        height: 12px;
        padding: 2px;
      }
    }
  }
}

.choose-ypr-table-container {
  margin-top: 30px;

  .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }

  .el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 57px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7 !important;
  }

  .el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 51px;
  }

  .table-data {
    width: 100%;
    border: 0.8px solid #004ca7;
    border-radius: 9px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #004ca7;
  }
}

.pagination-block {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.message-container {
  > div {
    display: inline-block;

    &:nth-child(1) {
      padding-left: 111px;
      font-size: 20px;
      color: rgba(0, 76, 167, 1);
      font-weight: bold;
      vertical-align: top;
    }

    &:nth-child(2) {
    }
  }
}
</style>
